昨日練習與學習列表渲染之後，今天來了解條件渲染的使用與應用！

React 條件渲染說明與範例

在 React 中，條件渲染是常見的功能，可以根據狀態變化來動態地選擇渲染不同的組件。React 提供了多種方法來實現條件渲染，將介紹幾種常用的條件渲染方法，以函式組件（Function Components）進行範例說明。

條件渲染的方法

以下是幾種常用的在 React 中處理條件渲染的方法：

1. if 語句：適合在函式組件的返回值中使用來決定渲染內容。
2. 三元運算式：適合在 JSX 中進行簡潔的條件渲染。
3. 邏輯與 (&&) 運算符：適合在 JSX 中條件渲染，當條件為 true 時渲染元素。
4. switch 語句：適合處理多個條件時使用。
5. null 返回值：適合在需要隱藏組件時使用，通過返回 null 讓組件不渲染。
6. 樣式控制：通過 CSS 或內聯樣式(inline Style)來控制組件的顯示與隱藏。

1. 使用 if 語句

if 語句是最直接的條件渲染方式。你可以在函式組件內部使用 if 語句，根據條件選擇要渲染的組件。

function UserGreeting() {
  return <h1>歡迎回來!</h1>;
}

function GuestGreeting() {
  return <h1>請先註冊。</h1>;
}

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />;
  } else {
    return <GuestGreeting />;
  }
}

// 使用 Greeting 組件
function App() {
  return <Greeting isLoggedIn={false} />;
}

在這個例子中，Greeting 組件根據 isLoggedIn 屬性的值選擇渲染 UserGreeting 或 GuestGreeting 組件。這種方式適合需要根據條件切換渲染內容。

2. 使用三元運算式

三元運算式可以讓你在 JSX 中進行更為簡潔的條件渲染。三元運算式的基本語法是 condition ? true : false。

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>歡迎回來!</h1> : <h1>請先註冊。</h1>}
    </div>
  );
}

// 使用 Greeting 組件
function App() {
  return <Greeting isLoggedIn={true} />;
}

這個例子展示了如何在 JSX 中使用三元運算式來進行條件渲染，代碼更加簡潔，適合在需要在同一位置渲染不同內容時使用。

3. 使用邏輯與 (&&) 運算符

邏輯與運算符是另一種常見的條件渲染方法。在 JSX 中，如果條件為 true，&& 右側的元素將會被渲染；如果條件為 false，React 會忽略並跳過它。

function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>您有 {unreadMessages.length} 條未讀訊息。</h2>
      )}
    </div>
  );
}

// 使用 Mailbox 組件
function App() {
  const messages = ['React', 'Re: React', 'Re:Re: React'];
  return <Mailbox unreadMessages={messages} />;
}

在這個例子中，只有當 unreadMessages 的長度大於 0 時，未讀訊息的提示才會顯示。
這種方式是條件為”真”時渲染，為”假”時都不渲染的情況。

4. 使用 switch 語句

switch 語句非常適合處理多個條件的情況，可以根據不同的條件渲染不同的內容。

function StatusMessage({ status }) {
  switch (status) {
    case 'loading':
      return <h1>加載中...</h1>;
    case 'success':
      return <h1>操作成功!</h1>;
    case 'error':
      return <h1>發生錯誤!</h1>;
    default:
      return <h1>未知狀態</h1>;
  }
}

// 使用 StatusMessage 組件
function App() {
  const status = 'success'; // 可替換為 'loading', 'error', 或其他值
  return <StatusMessage status={status} />;
}

在這個例子中，StatusMessage 組件使用 switch 語句來根據 status 屬性的值渲染不同的消息。switch 語句在處理多個條件時非常簡潔和直觀。

5. 返回 null 隱藏組件

在某些情況下，希望隱藏組件而不是顯示替代內容，則可以通過返回 null 來實現，React 會忽略渲染返回 null 的組件。

function WarningBanner({ warn }) {
  if (!warn) {
    return null;
  }

  return <div className="warning">警告!</div>;
}

// 使用 WarningBanner 組件
function Page() {
  const [showWarning, setShowWarning] = React.useState(true);

  return (
    <div>
      <WarningBanner warn={showWarning} />
      <button onClick={() => setShowWarning(!showWarning)}>
        {showWarning ? '隱藏' : '顯示'}
      </button>
    </div>
  );
}

在這個例子中，WarningBanner 組件只有在 warn 為 true 時才會渲染，否則返回 null 不渲染任何內容。用這方式將有效控制組件的顯示與隱藏。

6. 使用樣式控制組件顯示與隱藏

還可以通過 CSS 樣式來控制組件的顯示與隱藏。這種方法並不完全移除組件，而是隱藏讓它不在頁面上顯示，但它仍佔據 DOM元素 。

function ToggleDisplay({ isVisible }) {
  return (
    <div style={{ display: isVisible ? 'block' : 'none' }}>
      這個內容會根據 isVisible 狀態顯示或隱藏。
    </div>
  );
}

// 使用 ToggleDisplay 組件
function App() {
  const [isVisible, setIsVisible] = React.useState(true);

  return (
    <div>
      <ToggleDisplay isVisible={isVisible} />
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? '隱藏' : '顯示'} 內容
      </button>
    </div>
  );
}

在這個例子中，ToggleDisplay 組件通過 style 屬性的 display 樣式來控制組件的顯示與隱藏。

當 isVisible 為 true 時，內容顯示；為 false 時，內容隱藏。這種方式適合需要簡單地控制組件的可見性，而不想完全移除組件的情況。

樣式控制 vs 返回 null

需要注意的是，display: none 和返回 null 是兩種不同的隱藏組件的方法：

• display: none：隱藏組件但保留在 DOM 中，只是在頁面上隱藏。
• 返回 null：完全移除組件，不在 DOM 中渲染。

你可以根據實際需求而選擇使用 display: none 或是返回 null 來控制組件的顯示與隱藏。

總結

React 提供了多種條件渲染的方法，每種方法都有合適的使用場景，選擇適當的條件渲染方式，程式碼閱讀起來也比較簡潔易懂。

後記

本文將會同步更新到我的部落格

黃禎平 – Medium